<template>
	<div>
    <Breadcrumb :style="{margin: '15px 0',float: 'left'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>家庭管理</BreadcrumbItem>
      <BreadcrumbItem>家庭审核</BreadcrumbItem>
    </Breadcrumb>
    <Content class="layer-content">
      <Form inline>
        <FormItem>
          <Input style="width: 500px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="doSearch" @submit.native.prevent/>
        </FormItem>
        <FormItem>
          <Select style="width:120px" placeholder="审核状态" clearable @on-change="selectAudit">
            <Option :value="0">待审核</Option>
            <Option :value="1">审核通过</Option>
            <Option :value="2">驳回</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
          <Button @click="openExcelImport" type="info">村民导入</Button>
        </FormItem>
      </Form>
      <Table border :columns="columns" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="Init"></HigPager>
    </Content>
    <Modal width="70%" v-model="showDetail" title="家庭详情" :footer-hide="true">
      <Detail ref="refDetailView" :dataBus="dataVo" :callbank="eventAction"></Detail>
    </Modal>
    <Modal title="村民导入" :footer-hide="true" v-model="showImportExcel" width="600px">
      <ImportExcelVue ref="refExcelVue" :callbank="eventAction" :key="createKey"></ImportExcelVue>
    </Modal>
  </div>  
</template>

<script scope>
import Detail from './detail.vue'
import ImportExcelVue from "./import-excel.vue"
export default {
  data () {
    return {
      pageTotal: 0,
      createKey: 0,
      showDetail: false,
      showImportExcel: false,
      dataGrid:[],
      dataVo: {},
      keywords: null,
      query: {
        pageIndex: 1,
        pageSize: 15
      },
      columns: [
        {
          title: "户主",
          key: "householderName",
          width: 120
        },
        {
          title: "联系电话",
          key: "householderMobile",
          width: 120
        },
        {
          title: "家庭人口",
          key: "householdSize",
          width: 120
        },
        {
          title: "积分",
          key: "householdPoints",
          width: 100
        },
        {
          title: "居村委",
          key: "villageName",
        },
        {
          title: "村组(小区)",
          key: "subDistrictName",
        },
        {
          title: "审核状态",
          key: "auditText",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("Tag",params.row.auditText),
            ]);
          }
        },
        {
          title: "申请时间",
          key: "postTime",
          width: 130
        },
        {
          title: "操作",
          key: "action",
          width: 100,
          render: (h, params) => {
            return h("nav", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginLeft: "10px",
                  },
                  on: {
                    click: () => {
                      this.btnSee(params.row)
                    },
                  },
                },
                "查看"
              )
            ])
          },
        },
      ]
    }
  },
  components: {
    Detail,
    ImportExcelVue
  },
  methods: {
    //查看
    btnSee(e){
      this.dataVo = e
      this.showDetail = true
      this.$refs.refDetailView.init(e.householdId)
    },
    eventAction() {
      this.showDetail = false
      this.showImportExcel = false
      this.createKey ++
      this.Init()
    },
    selectAudit(status) {
      if(!this.query.equal) this.query.equal = new Object()
      this.query.equal.householdStatus = status
      this.Init()
    },
    openExcelImport() {
      this.showImportExcel = true
      this.$refs.refExcelVue.Init()
    },
    doSearch() {
      let sqlLike = {
        fields: ["householder_name", "household_code","committee_name","house_address"],
        keyword: this.keywords,
      }
      this.query.sqlLike = sqlLike
      this.query.pageIndex = 1
      this.Init()
    },
    reset() {
      delete this.query.sqlLike
      if(this.query.equal) delete this.query.equal.householdStatus
      this.keywords = null
      this.Init()
    },
    //获取列表
    Init(){
      new this.$rest({
        gateway: 'agrobiz',
        service: 'agrobiz-uc',
        url: '/v1.0/household/page',
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            this.pageTotal = res.data.data.count
            this.dataGrid = res.data.data.list
            for(let item of this.dataGrid) {
              item.postTime = this.$date(item.postTime,'yyyy-MM-dd')
              if(item.householdStatus === 0) {
                item.auditText = '待审核'
              } else if(item.householdStatus === 1) {
                item.auditText = '通过'
              } else {
                item.auditText = '驳回'
              }
            }
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      }).get()
     }
  },
  created(){
    this.Init()
  }
}
</script>
<style lang="less" scoped>
.imgs {
  width: 80%;
}
</style>